<template>
	<view>
		<uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext">
			<uni-group title="用户信息" top="0" :icon="icon" @submit="submit">
				<uni-forms-item name="userName" required label="用户名">
					<uni-easyinput type="text" :inputBorder="true" v-model="formData.userName"
						placeholder="请输入用户名"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="userSex" label="性别">
					<uni-data-checkbox v-model="formData.userSex" :localdata="sex"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item name="userEmail" label="邮箱">
					<uni-easyinput type="text" v-model="formData.userEmail" placeholder="请输入邮箱"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="userAddress" label="地址">
					<m-skeleton :loading="loading" style="display: flex;align-items: center;height: 100%;">
						<view @tap="locationChange" class="uni-select" >
							{{ locationInfo.province }} {{ locationInfo.city }} {{ locationInfo.county }}
						</view>
					</m-skeleton>
				</uni-forms-item>
			</uni-group>
		</uni-forms>
		<w-picker mode="region" :defaultVal="[locationInfo.province, locationInfo.city, locationInfo.county]"
			:areaCode="areaCode" :hideArea="false" @cancel="locationCancel" @confirm="locationConfirm"
			themeColor="#659af8" ref="region"></w-picker>
	</view>
</template>

<script>
import MSkeleton from '../../../components/MSkeleton/index';
import wPicker from '../../../components/w-picker/w-picker.vue';
import { mapGetters } from "vuex";
export default {
	components: {
		MSkeleton,
		wPicker
	},
	data() {
		return {
			loading: false,
			areaPickerInfo: {},
			locationInfo: {
				province: '',
				city: '',
				county: ''
			},
			areaCode: ['11', '1101', '110101'],
			icon: [{
				src: '../../static/interaction/edit-active.png',
				emit: 'submit'
			}],
			formData: {
				userName: '',
				userSex: '',
				userEmail: '',
				userAddress: ''
			},
			sex: [{
				text: '男',
				value: '1'
			},
			{
				text: '女',
				value: '2'
			}],
			rules: {
				userName: {
					rules: [{
						required: true,
						errorMessage: '请输入用户名'
					},
					{
						minLength: 3,
						maxLength: 15,
						errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符'
					}
					]
				},
				userSex: {
					rules: [{
						required: false,
						format: 'string'
					}]
				},
				userEmail: {
					rules: [{
						required: false,
						format: 'email',
						errorMessage: '请输入正确的邮箱地址'
					}]
				},
				userAddress: {
					rules: [{
						required: false,
						errorMessage: '请选择地址'
					}
					]
				},

			}
		}
	},
	computed: {
		...mapGetters(["userName", "userAvatar", "userSex", "userEmail", "userAddress"]),
	},
	onShow() {
		this.getUserDetail()
	},
	methods: {
		submit() {
			this.$refs['form']
				.validate()
				.then(async res => {
					await this.$store.dispatch("user/saveOrUpdate", this.formData)
					await this.getUserDetail()
					uni.showToast({
						title: "修改成功",
						icon: "none"
					})
				})
				.catch(errors => {
					if (errors[0]) {
						uni.showToast({
							title: errors[0].errorMessage,
							icon: "none"
						})
					}
				})
		},
		async getUserDetail() {
			await this.$store.dispatch("user/getInfo")
			this.formData.userName = this.userName
			this.formData.userAvatar = this.userAvatar
			this.formData.userSex = this.userSex
			this.formData.userEmail = this.userEmail
			this.formData.userAddress = this.userAddress
			if (this.userAddress) {
				this.locationInfo.province = this.userAddress.split(',')[0]
				this.locationInfo.city = this.userAddress.split(',')[1]
				this.locationInfo.county = this.userAddress.split(',')[2]
			}
		},
		async locationConfirm(val) {
			console.log('local', val);
			this.areaPickerInfo = val;
			let province = this.areaPickerInfo.checkArr[0];
			let city = this.areaPickerInfo.checkArr[1];
			let county = this.areaPickerInfo.checkArr[2];
			if (this.areaPickerInfo.checkArr[1] == '市辖区' || this.areaPickerInfo.checkArr[1] == '县') {
				city = province;
			}
			this.locationInfo.province = province;
			if (province == city) {
				this.locationInfo.city = '';
			} else {
				this.locationInfo.city = city;
			}
			this.locationInfo.county = county;
			this.formData.userAddress = `${province},${this.locationInfo.city},${county}`;
		},
		locationCancel() {
			this.areaPickerInfo = null;
		},
		locationChange() {
			this.$refs.region.show();
		}
	}
}
</script>

<style>
.uni-input-border {
	padding: 0 10px;
	height: 35px;
	width: 100%;
	font-size: 14px;
	color: #666;
	border: 1px #e5e5e5 solid;
	border-radius: 5px;
	box-sizing: border-box;
}
.uni-select{
	border: 2rpx solid #e5e5e5;
	border-radius: 10rpx; 
	height: 100%;
	width: 100%;
	line-height: 35px;
	padding-left: 20rpx;
}
</style>